import { FC, memo, useEffect } from 'react'
import { HomeWrapper } from './style'
import LtCarousel from '@/component/lt-carousel'
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store'
import {
  fetchHomeBanners,
  fetchHomeVisiteData,
  fetchHomeVisiteDataLength
} from '@/store/module/home'
import NumberCounter from '@/base-ui/lt-numberCounter'
import { useNavigate } from 'react-router-dom'

interface IState {
  children?: React.ReactNode
}

const Home: FC<IState> = memo(() => {
  const dispatch = useAppDispatch()
  const navigate = useNavigate()

  useEffect(() => {
    dispatch(fetchHomeBanners()) // 获得首页轮播图
    dispatch(fetchHomeVisiteData()) // 获得首页访问量
    dispatch(fetchHomeVisiteDataLength()) // 获得书数据长度
    return () => {}
  }, [dispatch])

  const { banners, homeChuckList, visiteData, dataLength } = useAppSelector(
    (state) => ({
      banners: state.home.banners,
      homeChuckList: state.options.homeChuckList,
      visiteData: state.home.visiteData,
      dataLength: state.home.dataLength
    }),
    shallowEqualApp
  )

  // 跳转去gitee
  const toGitee = (url: string) => {
    window.open(url)
  }

  // 跳转去对应的路由
  const gotoPath = (url: string) => {
    navigate(url)
  }

  // 渲染轮播图
  const renderBanners = () => {
    return banners.map((item: any) => {
      return (
        <div key={item.id} className="item">
          <div className="left">
            <div className="left">
              {item.title.split('??').map((m: string) => {
                return (
                  <h2 key={m} className="title_item">
                    {m}
                  </h2>
                )
              })}
              {item.subtitle.split('??').map((m: string) => {
                return (
                  <p key={m} className="sub_title_item">
                    {m}
                  </p>
                )
              })}
              {<p className="desc">{item.desc}</p>}
              <div className="btn_item" onClick={() => toGitee(item.gitee_url)}>
                <span>去gitee下载</span>
                <span className="iconfont icon-jiantou_xiangyou_o"></span>
              </div>
            </div>
          </div>
          <div className="right">
            <img src={item.poster} alt="图片" />
          </div>
        </div>
      )
    })
  }

  // 渲染可跳转的path列表
  const renderOptions = () => {
    return homeChuckList.map((item, index) => {
      return (
        <div className="option_item item_link" key={index} onClick={() => gotoPath(item.path)}>
          <div className="header">
            <div className="icon_box" style={{ backgroundColor: `${item.mainColor}` }}>
              <span className={`iconfont icon ${item.icon}`}></span>
            </div>
            <span className="num" style={{ color: `${item.mainColor}` }}>
              {dataLength[index]}
            </span>
          </div>
          <div className="content">
            <p className="title">{item.title}</p>
            <p className="desc t_elli_more">{item.desc}</p>
          </div>
          <div className="footer">
            <span className="iconfont icon icon-jiantou_xiangyou_o"></span>
          </div>
        </div>
      )
    })
  }

  return (
    <HomeWrapper>
      {/* 轮播图 */}
      <div className="carousel">
        <LtCarousel mode="fade" dot={false}>
          {renderBanners()}
        </LtCarousel>
      </div>
      {/* 一些选项和数据 */}
      <h1 className="title">模块数据</h1>
      <div className="options">
        {/* 网站数据 */}
        <div className="option_item">
          <div className="title_box">
            <NumberCounter targetNumber={visiteData.allData}></NumberCounter>
            <span className="desc">总访问量</span>
          </div>
          <div className="sub_title_box">
            <NumberCounter targetNumber={visiteData.todayData}></NumberCounter>
            <span className="desc">今日访问量</span>
          </div>
        </div>
        {/* 网站主链接 */}
        {renderOptions()}
      </div>
    </HomeWrapper>
  )
})

export default Home
